﻿@model IEnumerable<System.Linq.IGrouping<int, CTM.Web.Models.View.Conversation.ConversationViewModel>>
@using CTM.Web.Utils

@{
    ViewBag.Title = "Conversation";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Styles.Render("~/Content/timeline")
<link rel="stylesheet" href="@Url.Content("~/Content/Libraries/rbvh/css/rbvh-tagclouds.css")" type="text/css">

<div class="row">
    <div class="col-sm-12">
        <form class="form-inline" id="filter-form" onsubmit="getConversations(event);">
            <div class="form-group">
                <button type="button" class="btn btn-primary pull-left" data-toggle="modal" data-target="#AddConversationModal" id="btnAddConversation" data-url='@Url.Action("Create", "Conversation")'>
                    <span class="glyphicon glyphicon-plus"></span> Add Conversation
                </button>
            </div>
            <div class="pull-right">
                <div class="form-group">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh btn-success active">
                            <input type="checkbox" autocomplete="off" name="Statuses" value="Smile" onchange="$('#filter-form').submit();" checked="checked">
                            <span class="fa fa-lg fa-smile-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-warning active">
                            <input type="checkbox" autocomplete="off" name="Statuses" value="Neutral" onchange="$('#filter-form').submit();" checked="checked">
                            <span class="fa fa-lg fa-meh-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-danger active">
                            <input type="checkbox" autocomplete="off" name="Statuses" value="Frown" onchange="$('#filter-form').submit();" checked="checked">
                            <span class="fa fa-lg fa-frown-o"></span>
                        </label>
                    </div>

                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-rbvh grey-darkgrey active">
                            <input type="checkbox" autocomplete="off" name="Types" value="Goals" onchange="$('#filter-form').submit();" checked="checked"> Goals
                        </label>
                        <label class="btn btn-rbvh blue-aqua active">
                            <input type="checkbox" autocomplete="off" name="Types" value="Career" onchange="$('#filter-form').submit();" checked="checked"> Career
                        </label>
                        <label class="btn btn-rbvh red-bittersweet active">
                            <input type="checkbox" autocomplete="off" name="Types" value="Individual" onchange="$('#filter-form').submit();" checked="checked"> Individual
                        </label>
                    </div>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Keyword" name="Keyword">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div id="divTimeline">
            @Html.Partial("_TimelinePartial", Model)
        </div>
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="AddConversationModal" tabindex="-1" role="dialog" aria-labelledby="AddConversationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="AddConversationModalLabel">Create Conversation</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid" id="AddConversationModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$('#add-conversation-form').submit();">Create</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Edit Modal -->
<div class="modal fade" id="EditConversationModal" tabindex="-1" role="dialog" aria-labelledby="EditConversationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="EditConversationModalLabel">Edit Conversation</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid" id="EditConversationModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$('#edit-conversation-form').submit();">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Delete Modal -->
<div class="modal fade" id="DeleteConversationModal" tabindex="-1" role="dialog" aria-labelledby="DeleteConversationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteConversationModalLabel">Delete Conversation</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid" id="DeleteConversationModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$('#delete-conversation-form').submit();">Ok</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="DeleteCommentModal" tabindex="-1" role="dialog" aria-labelledby="DeleteCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteCommentModalLabel">Delete Comment</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid" id="DeleteCommentModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$('#delete-comment-form').submit();">Ok</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<style>
    .bs-example {
        padding: 15px;
        margin: 0 -15px 15px;
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        background-color: #fff;
        border-width: 1px;
        border-radius: 4px 4px 0 0;
    }

    .highlight {
        padding: 9px 14px;
        margin: -15px -15px 15px;
        margin-bottom: 14px;
        background-color: #f7f7f9;
        border: 1px solid #e1e1e8;
        margin-top: -16px;
        border-width: 1px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .imgCommentLogo {
        float: left;
        margin-right: 10px;
    }

    .rbvh-label-emoticon {
        padding: 0px 2px;
        border-radius: 10px;
        margin-top: -5px;
    }

    .rbvh-h3 {
        font-size: 1.6em;
        margin-left: 5px;
        font-weight: bold;
    }

    .rbvh-conversation-type-label {
        margin-left: 5px;
        font-size: 1.6em;
    }

    .timeline-event-content button {
        opacity: 1;
        margin: -1px 0 0 5px;
    }

    .timeline-event-content .label-emoticon {
        opacity: 1;
        float: left;
    }

    .rbvh-emoticon-red {
        margin-left: 10px;
        color: red;
    }

    .rbvh-emoticon-orange {
        margin-left: 10px;
        color: #f6bb42;
    }

    .rbvh-emoticon-green {
        margin-left: 10px;
        color: #5cb85c;
    }

    .rbvh-btn-remove-comment {
        margin: 0;
        padding: 0;
    }
</style>

@section scripts{
    <script type="text/javascript" src="@Url.Content("~/Content/Libraries/timeliner/js/timeliner.js")"></script>
    <script>
        // filter data
        function getConversations(e) {
            e.preventDefault();
            var form = $(e.target).closest('form')[0];
            $('#divTimeline').load('@Url.Action("TimelinePartial", "Conversation")', $(form).serialize(), function (responseText, statusText, xhr) {
                // BEGIN - AVATAR ERROR HANDLING
                $('.user-avatar').error(function () {
                    this.onerror = null;
                    this.src = '@Url.Content("~/Content/Images/GetUserPhoto.png")';
                });
                // END - AVATAR ERROR HANDLING

                bindEvents();
            });
        };

        function handleModal($divBody, divForm, url, isEdit) {
            $.get(url, function (data) {
                $divBody.html(data);
                $.validator.unobtrusive.parse($(divForm));
                // ====================
                $('#manager-search-box .typeahead').typeahead('destroy');

                // constructs the suggestion engine
                var managers = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: '@Url.Action("SearchManagers", "Home")' + '?q=%QUERY',
                        wildcard: '%QUERY',
                    }
                });

                $('#manager-search-box .typeahead').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    name: 'managers',
                    display: 'DisplayName',
                    limit: 10,
                    source: managers,
                    templates: {
                        notFound: [
                          '<div class="empty-message">',
                            'unable to find any manager that match the current query',
                          '</div>'
                        ].join('\n'),
                        suggestion: function (data) { // data is an object as returned by suggestion engine
                            return '<p>' + data.DisplayName + '</p>';
                        }
                    }
                });

                $('#manager-search-box .typeahead').bind('typeahead:select', function (ev, suggestion) {
                    $('#ManagerId').val(suggestion.Id);
                });

                // Necessary scripts for Bootstrap Tags Input
                var tags = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: '@Url.Action("Tags", "Home")' + '?name=%QUERY',
                        wildcard: '%QUERY',
                        filter: function (list) {
                            return $.map(list, function (tag) {
                                return { name: tag };
                            });
                        }
                    }
                });
                tags.initialize();

                $('#ConversationTags').tagsinput({
                    typeaheadjs: {
                        name: 'tags',
                        displayKey: 'name',
                        valueKey: 'name',
                        source: tags.ttAdapter()
                    }
                });

                // load manager
                var managerNameHiddenInput = $('#HiddenManagerDisplayName');
                $('#manager-search-box .typeahead').typeahead('val', managerNameHiddenInput.val());

                if (isEdit) {
                    // load current tags
                    $('#ConversationTags').tagsinput('removeAll');

                    var tagHiddenInput = $('#HiddenConversationTags');
                    var currentTags = tagHiddenInput.val().split(',');
                    for (var i = 0; i < currentTags.length; i++) {
                        if (currentTags[i] !== '') {
                            $('#ConversationTags').tagsinput('add', currentTags[i]);
                        }
                    }
                }
            });
        };

        function bindEvents() {
            $.timeliner({
                timelineContainer: '#timeline',
                startOpen: [window.location.hash],
            });

            // ENTER EVENT HANDLING FOR COMMENT TEXTBOX
            $(".input-for-comment").keypress(function (event) {
                if (event.which == 13) {
                    event.preventDefault();

                    var formId = $(this).attr("data-form-id");
                    var content = $(this).val();

                    if (content) {
                        $('#' + formId).submit();
                    }
                }
            });

            // open 'Create Conversation' popup
            $('#btnAddConversation').on('click', function (evt) {

                var $divBody = $('#AddConversationModalBody'),
                    divForm = '#add-conversation-form',
                    url = $(this).data('url');

                handleModal($divBody, divForm, url, false);
            });

            $('#AddConversationModal').on('hidden.bs.modal', function () {
                $('#AddConversationModalBody').html('');
            })

            // open 'Edit Conversation' popup
            $('.btnEditConversation').on('click', function (evt) {

                var $divBody = $('#EditConversationModalBody'),
                    divForm = '#edit-conversation-form',
                    url = $(this).data('url');

                handleModal($divBody, divForm, url, true);
            });

            $('#EditConversationModal').on('hidden.bs.modal', function () {
                $('#EditConversationModalBody').html('');
            })

            // open 'Delete Conversation' popup
            $('.btnDeleteConversation').on('click', function (evt) {

                var $divBody = $('#DeleteConversationModalBody'),
                    $divForm = $('#delete-conversation-form'),
                    url = $(this).data('url');

                $.get(url, function (data) {
                    $divBody.html(data);
                    $.validator.unobtrusive.parse($divForm);
                });
            });

            $('#DeleteConversationModal').on('hidden.bs.modal', function () {
                $('#DeleteConversationModalBody').html('');
            })

            // open 'Delete Comment' popup
            $('.rbvh-btn-remove-comment').on('click', function (evt) {

                var $divBody = $('#DeleteCommentModalBody'),
                    $divForm = $('#delete-comment-form'),
                    url = $(this).data('url');

                $.get(url, function (data) {
                    $divBody.html(data);
                    $.validator.unobtrusive.parse($divForm);
                });
            });

            $('#DeleteCommentModal').on('hidden.bs.modal', function () {
                $('#DeleteCommentModalBody').html('');
            })
        }

        $(document).ready(function () {
            bindEvents();
        });
    </script>
}